<template>
<div>

  <div class="container">
    <div class="row clearfix">
      <div class="col-md-12 column">

        <div class="jumbotron">
          <h1>
            批量分类
          </h1>
          <p>
            首先点击下面的蓝色按钮下载模板，将新闻的内容填写到模板中，再进行上传
          </p>
          <p>
            <a class="btn btn-primary btn-large " v-on:click="download">下载模板</a>
          </p>
        </div>
      </div>
    </div>
    <div class="row clearfix">
      <div class="col-md-4 column">
      </div>
      <div class="col-md-4 column">

        <div>
          <el-button class="btn-upload" type="primary" @click="handleUpdate">上传文件</el-button>
          <el-dialog
              title="提示"
              :visible.sync="dialogVisible"
              width="30%"
          >
			<span>
				<el-upload class="upload-demo"
                   ref="upload"
                   drag
                   action="http://localhost:9000/upload"
                   multiple
                   :auto-upload="false"
                   :limit="5"
                   :on-success="handleFilUploadSuccess"
                   :on-remove="handleRemove"
        >
					<i class="el-icon-upload"></i>
					<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
					<div class="el-upload__tip" slot="tip">只能上传 Excel 文件，且不超过500kb</div>
				</el-upload>
			</span>
            <span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleUpload">确 定</el-button>
			</span>
          </el-dialog>
        </div>
        <br>

        <div style="margin: 20px 0;"></div>
        <button class="btn" v-on:click="newsclass">开始分类</button>
        <div v-if="classhide">
        <div v-for="result in results">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ result.tag }}</span>
            <el-button style="float: right; padding: 3px 0" type="text">新闻类别</el-button>
          </div>
          <div class="text item">
          {{result.context}}
          </div>
        </el-card>
        </div>
        </div>
      </div>
      <div class="col-md-4 column">
      </div>
    </div>
  </div>



  <div class="row clearfix">
    <div class="col-md-12 column footer">
      <p style="text-align: center;"><br>
        文文 ADN 港港 <strong>不写注释</strong> 编写
      </p>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: "Dnews",
  data(){
    return{
      dialogVisible: false,
      text: '',
      textarea: '',
      results:[],
      classhide:false
    }
  },
  methods:{
    newsclass(){
      let _this=this;
      _this.$ajax.get(baseUrl+"news/dnewsclass").then((response=>{

        _this.results=response.data;
        _this.classhide=true;
      }))
    }
    ,
    download(){
      let _this=this;
      window.location.href =baseUrl+"download";
    },
    handleRemove(file,fileList) {

    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    // 文件上传成功时的函数
    handleFilUploadSuccess (res,file,fileList) {

      this.$message.success("上传成功")
    },
    handleUpdate () {
      this.dialogVisible = true;
    },
    // 处理文件上传的函数
    handleUpload () {
      // console.log(res,file)
      this.submitUpload()
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
}

.el-upload {
  margin: 5px;
}

</style>